<template>
  <el-collapse-item :name="index">
    <template #title>
      <div class="system-title">
        <span class="system-name">系统版本: {{ system.system_version_name }}</span>
        <span class="vip-level">VIP等级: {{ system.vip_level }}</span>
        <div class="system-actions">
          <el-button 
            type="primary" 
            size="small" 
            @click.stop="$emit('add-package', system)"
          >
            添加套餐
          </el-button>
          <el-button
            type="danger"
            size="small"
            @click.stop="$emit('delete-system', system)"
          >
            删除套餐
          </el-button>
        </div>
      </div>
    </template>
    
    <div class="package-cards">
      <el-row :gutter="20">
        <el-col v-for="pkg in system.activate_package" :key="pkg.actually_package_id" :span="8">
          <package-card 
            :pkg="pkg" 
            @edit="$emit('edit-package', pkg)" 
            @remove="$emit('remove-package', pkg)"
          />
        </el-col>
      </el-row>
    </div>
  </el-collapse-item>
</template>

<script setup lang="ts">
import PackageCard from './PackageCard.vue'

defineProps({
  system: {
    type: Object,
    required: true
  },
  index: {
    type: Number,
    required: true
  }
})

defineEmits(['add-package', 'delete-system', 'edit-package', 'remove-package'])
</script>

<style lang="scss" scoped>
.system-title {
  display: flex;
  align-items: center;
  gap: 20px;
  
  .system-name {
    font-weight: bold;
  }
  
  .vip-level {
    color: #409EFF;
  }
  
  .system-actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
  }
}

.package-cards {
  margin-top: 15px;
}
</style> 